/**
 * 评估元数据面板组件
 */
import React from 'react';
import { FileText, Clock, Tag } from 'lucide-react';
import type { EvaluationMetadata } from '@/types/ProofMapper';

interface MetadataPanelProps {
  metadata?: EvaluationMetadata;
  className?: string;
}

const MetadataPanel: React.FC<MetadataPanelProps> = ({ 
  metadata = {
    source_file: '未知文件',
    generated_at: new Date().toISOString(),
    version: 'v1.0.0'
  }, 
  className = '' 
}) => {
  const formatDateTime = (dateTimeStr: string) => {
    return new Date(dateTimeStr).toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  return (
    <div className={`bg-white/80 dark:bg-card backdrop-blur-sm rounded-lg border border-border p-4 ${className}`}>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="flex items-center gap-2">
          <div className="flex items-center justify-center w-8 h-8 bg-blue-500/10 rounded-lg">
            <FileText className="h-4 w-4 text-blue-500" />
          </div>
          <div>
            <div className="text-sm text-muted-foreground">源文件</div>
            <div className="text-sm font-medium text-foreground">{metadata.source_file}</div>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <div className="flex items-center justify-center w-8 h-8 bg-green-500/10 rounded-lg">
            <Clock className="h-4 w-4 text-green-500" />
          </div>
          <div>
            <div className="text-sm text-muted-foreground">生成时间</div>
            <div className="text-sm font-medium text-foreground">
              {formatDateTime(metadata.generated_at)}
            </div>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <div className="flex items-center justify-center w-8 h-8 bg-purple-500/10 rounded-lg">
            <Tag className="h-4 w-4 text-purple-500" />
          </div>
          <div>
            <div className="text-sm text-muted-foreground">版本</div>
            <div className="text-sm font-medium text-foreground">{metadata.version}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MetadataPanel;
